<template>
	<view class="FoodRecommendationList" v-if="dataList">
		<view v-for="(item, index) in dataList" :key="index" @click="openDetail(item.pk_id)">
			<view class="box">
				<view class="box_img"><image :src="item.logo"></image></view>
				<view class="box_details">
					<view class="name u-line-2">{{ item.name }}</view>
					<view class="title u-line-1">{{ item.superiority }}</view>
					<view class="price-box">
						<view class="price">
							<text class="price-left-icon">￥</text>
							<text class="price-num">{{ item.stock_list[0].price || 0 }}</text>
							<text class="price-link" v-if="item.stock_list[0].cost_price > 0">¥{{ item.stock_list[0].cost_price || 0 }}</text>
						</view>
						<view class="spec">选规格</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="isComponent || pageNo > 1">
			<sww-load-more :params="{init:true,loading:loading,len:dataList.length,loadMore:pageCount > pageNo}"></sww-load-more>
		</template>
	</view>
</template>

<script>
import { configMixin } from './configMixin.js';
export default {
	mixins: [configMixin],
	components: {},
	data() {
		return {};
	},
	methods: {
		openDetail (id) {
			this.$linkTo(`/package/restaurant/detail/index?pk_id=${id}`)
		},
	}
};
</script>

<style scoped lang="scss">
.FoodRecommendationList {
	background: #fff;
	padding: 10rpx 30rpx 30rpx;
}
.box {
	box-shadow: 0px 4px 11px 2px rgba(153, 152, 152, 0.15);
	border-radius: 8px;
	display: flex;
	padding: 20rpx;
	margin-bottom: 30rpx;
	&:last-of-type {
		margin-bottom: 0;
	}
	.box_img {
		width: 220rpx;
		height: 220rpx;
		background-color: #f4f4f4;
		margin-right: 16rpx;
	}
}

.box_details {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
.name {
	color: #333;
	font-size: 28rpx;
	font-weight: bold;
	line-height: 34rpx;
	height: 68rpx;
}

.title {
	font-size: 24rpx;
	color: #666666;
}
}

.price-box {
	display: flex;
	align-items: center;
	padding-top: 20rpx;
	.price {
		flex: 1;
		overflow: hidden;
		.price-left-icon {
			font-size: 24rpx;
			color: #ff1f00;
			font-weight: bold;
			font-family: PingFang SC;
		}
		.price-num {
			font-size: 36rpx;
			font-weight: bold;
			color: #ff1f00;
		}
		.price-link {
			text-decoration: line-through;
			font-size: 26rpx;
			color: #666;
			font-family: PingFang SC;
			margin-left: 10rpx;
		}
	}
	.spec {
		margin-left: 10rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		padding: 0 18rpx;
		border-radius: 24rpx;
		background: #f34d4e;
		color: #fff;
	}
}
</style>
